<template>
	<view class="search">
		<view class="search-header">
			<view class="ser">
				<u-icon name="search" color="#909399" :size="26"></u-icon>
				<u--input type="text" border="none" @input="inputKey" :value="tabname" placeholder="请输入搜索关键值" clearable @focus="isShow = true"></u--input>
			</view>
			<u-transition :show="isShow" mode="fade-right">
				<view class="buttom" @click="search()">
					<text>搜索</text>
				</view>
			</u-transition>
		</view>
		<view class="hot-search">
			<view class="name">热门搜索:</view>
			<u-button type="error" :plain="true" shape="circle" @click="inputKey('奶粉')">奶粉</u-button>
			<u-button type="error" :plain="true" shape="circle" @click="inputKey('面霜')">面霜</u-button>
			<u-button type="error" :plain="true" shape="circle" @click="inputKey('图书')">图书</u-button>
		</view>
		<view class="record">
			<view class="r-header">历史记录:</view>
			<view class="r-ul">
				<view class="r-li" v-for="item in getList" :key="item">
						<u-button type="default" :plain="true"  shape="circle" @click="inputKey(item)">{{item}}</u-button>
				</view>
			</view>
		</view>
		<good-list :list="goods"></good-list>
		<view class="status"><u-loadmore :status="status"/></view>
	</view>
</template>

<script>
	import{apiGoods} from '../../api/mock'
	import {mapActions,mapGetters} from 'vuex'

	export default {
		data() {
			return {
				isShow:false,
				goods:[],
				num:6, //每页条数
				p:1, //当前页码
				tabname:'',
				status:'loadmore',
			}
		},
		onLoad() {
			//当页面加载完成后，请求各类数据
			//bug：由于请求返回需要1秒。为了顺利获取数据设置定时器2秒后在执行该函数
			setTimeout(()=>{
				this.getGoods()
			},1100)
		},
		onReachBottom() {
			let msg = this.tabname;
			if(this.tabname.trim() == ''){
				msg = '全部';
			}
			this.status='loading';
			this.p++; //每次触底页码自增
			//根据最近一次的选项卡改变事件中，获取的选项卡下标，提取出来名称
			//获取触底后的页码对应的数据
			apiGoods(this.p, this.num, msg).then((res)=>{
				this.status='loadmore';
				this.goods = [...this.goods,...res.list];
				console.log(this.goods);
			if(this.goods.length == res.total){
				this.status = 'nomore';
			}
			}).catch((err)=>{
				console.log(err);
			})
		},
		computed:{
			...mapGetters(['getList'])
		},
		methods: {
			...mapActions(['addKeyWord']),
			search(){
				this.getGoods();
				this.addKeyWord(this.tabname);
			},
			inputKey(e){
				console.log(e);
				this.tabname = e;
				this.getGoods();
			},
			getGoods(){
				let msg = this.tabname;
				if(this.tabname.trim() == ''){
					msg = '全部';
				}
				console.log(mapGetters);
				this.status='loading';
				this.goods=[];
				console.log(msg);
				apiGoods(this.p, this.num, msg).then((res)=>{
					this.status='loadmore';
					this.goods = res;
					console.log(res);
				if(this.goods.length == res.total){
					this.status = 'nomore';
				}
				}).catch((err)=>{
					console.log(err);
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.search{
		padding: 10px;
		.search-header{
			width: 100%;
			display: flex;
			height: 35px;
			line-height: 35px;
			.ser{
				display: flex;
				padding: 7px;
				width: 100%;
				background-color: #f2f2f2;
				border-radius: 20px;
			}
			.ser input{
				width: 100%;
			}
			.buttom{
				height: 100%;
				width: 60px;
				text-align: center;
			}
		}
		.hot-search{
			display: flex;
			width: 90%;
			margin-top: 20px;
			.name{
				height: 100%;
				line-height: 30px;
			}
		}
		.hot-search button{
			width: 70px;
			height: 30px;
		}
		.record{
			width: 100%;
			margin-top: 10px;
			margin-bottom: 20px;
			.r-header{
				font-weight: bold;
			}
			.r-ul{
				width: 100%;
				display: flex;
				overflow: hidden;
				flex-wrap: wrap;
				.r-li{
					padding: 5px;
				}
				.r-li button{
					padding: 15px;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					border: 1px solid black;
				}
			}
		}
	}
</style>
